var showMap = (function () {
    var _createCanvas = function () {
        // 创建canvas，并初始化 （我们也可以直接以标签形式写在页面中，然后通过id等方式取得canvas）
        var canvas = document.createElement('canvas');
        //设置宽度、高度
        canvas.width = 600;
        canvas.height = 600;
        
        document.body.appendChild(canvas);

        return canvas;
    };
    var _getImg = function () {
        var urls = [];
        var temp = [];
        var i = 0,
            len = 0;

        temp = [{
            id: 'ground',
            url: 'ground.png'
        }, {
            id: 'wall',
            url: 'wall.png'
        }];

        for (i = 0, len = temp.length; i < len; i++) {
            urls.push({
                id: temp[i].id,
                url: bomberConfig.url_pre.SHOWMAP + temp[i].url
            });
        }

        return urls;
    };

    return {
        context: null,
        imgLoader: null,
        init: function () {
            var self = this;
            var canvas = _createCanvas();

            //为了方便测试，将“取得2d绘图上下文”封装到方法中
            this.getContext(canvas);

            this.imgLoader = new YYC.Control.PreLoadImg(_getImg(), function (currentLoad, imgCount) {
                $('#progressbar').progressbar({
                    value: parseInt(currentLoad * 100 / imgCount, 10)
                }); //调用进度条插件
            }, YYC.Tool.func.bind(this, this.onload));
        },
        onload: function () {
            $('#progressBar').css('display', 'none');
            this.context.drawImage(this.imgLoader.get('ground'), 0, 0);

            // if (!this._pattern) {
            //     this._pattern = this.context.createPattern(bitmapFactory.createBitmap(showMap.imgLoader.get('ground')).img, 'repeat')
            // }
            // this.context.fillStyle = this._pattern
            // this.context.fillRect(0, 0, 200, 200)
        },
        getContext: function (canvas) {
            this.context = canvas.getContext('2d');
        }
    };

    window.showMap = showMap;
}());